<body class="body">

  <div class="container">
    <br>
    <h2 style="color: antiquewhite;">欢迎, {{ username }}</h2><br>

    <div>

      <!-- 用户信息展示 -->
      <button (click)="editProfile()">编辑个人信息</button>
      <button (click)="goBackToIndex()">返回主页</button>
      <br><br>
      <span class="info-text" *ngIf="isEditing" style="color:aliceblue"> 输入新的用户名和密码</span><br><br>
    </div>

    <div *ngIf="isEditing">
      <input type="text" [(ngModel)]="user.username" placeholder="New Name">
      <br>
      <input type="password" [(ngModel)]="user.password" placeholder="New Password">
    </div>

    <!-- 用户信息编辑 按下编辑按钮进入编辑模式，可选择保存或取消-->
    <div *ngIf="isEditing" class="editing-buttons">
      <button (click)="saveProfile()" class="button">保存修改 </button>
      <button (click)="cancelEdit()" class="button"> 取消修改</button>
    </div>

  </div>


  <div class="container1">
    <h3 style="color: antiquewhite;">历史房间</h3>
    <div *ngIf="isEmpty" style="color: antiquewhite;">还没有任何记录，赶紧去体验吧</div>
    <ul>
      <li *ngFor="let room of visitedRooms" class="room-item">
        Room Name: {{ room.name }} <br>
        Enter Time: {{ room.enterTime }}
      </li>
    </ul>
  </div>

  <iframe id="iframeId" src="http://localhost:2002/recept.html" scrolling="no" style="display: none;">
  </iframe>
</body>